<template>
	<view>
		<view class="user-head" @click="goLogin()" v-if="!('id' in user_info)">
			<text class="user-image">
				<text>
					用户
					<br />
					头像
				</text>
			</text>
			<text class="user-name">用户名</text>
		</view>
		<view class="user-head" v-else>
			<view class="top">
				<image class="user-image" :src="user_info.avatar" mode=""></image>
				<text class="user-name">{{ user_info.nickname }}</text>
			</view>
			<view class="btm" v-if="user_info.birthday == 0">
				<picker mode="date" @change="checkBirthday">
					<view>
						<text class="">请选择您的生日：{{ birthday }}</text>
					</view>
				</picker>
				<text class="tip">不可修改，请慎重填写</text>
			</view>
			<view class="btm" v-else>
				<text>您的生日：{{ $db.timeStampToYearDay(user_info.birthday * 1000) }}</text>
			</view>
		</view>

		<view class="order-wrapper card-list">
			<view class="order-head card-item" @click="$db._NavTo('order-list-page')">
				<view class="left"><text>我的订单</text></view>
				<view class="right">
					<text>查看全部订单</text>
					<image src="/static/user/icon1@2x.png" mode=""></image>
				</view>
			</view>
			<view class="order-card">
				<view class="order-item" v-for="(item, index) in order_list" :key="index" @click="$db._NavTo('order-list-page', { type: item.type })">
					<image :src="item.img_url" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="card-list">
			<view class="card-item" @click="invitation()">
				<view class="left">
					<image src="/static/user/icon6@2x.png" mode=""></image>
					<text>邀请新人</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
			<view class="card-item" @click="$db._NavTo('punch-clock-page')">
				<view class="left">
					<image src="/static/user/icon6@2x.png" mode=""></image>
					<text>我的记录</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
			<view class="card-item" @click="$db._NavTo('coupon')">
				<view class="left">
					<image src="/static/user/icon7@2x.png" mode=""></image>
					<text>卡券</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
			<view class="card-item" @click="$db._NavTo('order-food-list-page')">
				<view class="left">
					<image src="/static/user/icon8@2x.png" mode=""></image>
					<text>周期性饮食服务</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
		</view>

		<view class="card-list">
			<view class="card-item" @click="$db._NavTo('addressList_page')">
				<view class="left">
					<image src="/static/user/icon9@2x.png" mode=""></image>
					<text>收货地址</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
		</view>

		<view class="card-list">
			<view class="card-item" @click="$db._NavTo('customer-service-page')">
				<view class="left">
					<image src="/static/user/icon10@2x.png" mode=""></image>
					<text>我的客服</text>
				</view>
				<view class="right"><image src="/static/user/icon1@2x.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_list: [
				{
					name: '待付款',
					img_url: '/static/user/icon2@2x.png',
					type: 1
				},
				{
					name: '进行中',
					img_url: '/static/user/icon3@2x.png',
					type: 2
				},
				{
					name: '待评价',
					img_url: '/static/user/icon4@2x.png',
					type: 3
				},
				{
					name: '已完成',
					img_url: '/static/user/icon5@2x.png',
					type: 4
				}
			],
			user_info: {},
			birthday: ''
		};
	},
	mounted() {
		let date = new Date();
		this.birthday = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
		this.getData();
	},
	methods: {
		getData: function() {
			this.$api.getWxInfo().then(res => {
				console.log(res);
				// res.data.birthday = 0;
				this.user_info = res.data;
			});
		},
		checkBirthday: function(v) {
			// 选择生日
			// this.birthday = v.target.value;

			let birthday_arr = v.target.value.split('-');
			let date = new Date(Number(birthday_arr[0]), Number(birthday_arr[1]) - 1, Number(birthday_arr[2]), 0, 0, 0);
			this.$api
				.setEditYmd({
					date: (date.getTime() / 1000).toFixed(0)
				})
				.then(res => {
					console.log(res);
					this.$db._ShowToast(res.msg, () => {
						this.getData();
					});
				});
		},
		goLogin: function() {
			this.$api.userLogin().then(res => {
				location.href = res.data.url;
			});
		},
		invitation: function() {
			// 邀请信用户
			this.$api.getIsPayUser().then(res => {
				if (res.data.status == 1) {
					this.$db._NavTo('share-article');
				} else {
					this.$db._ShowToast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.user-head {
	width: 100%;
	height: 324rpx;
	display: flex;
	flex-flow: column;
	justify-content: center;
	background: url(../../static/user/bg@2x.png);
	background-size: 100%;
	background-position: center;

	.top {
		display: flex;
		align-items: center;

		.user-image {
			margin: 0 30rpx;
			display: block;
			width: 126rpx;
			height: 126rpx;
			background: rgba(244, 246, 248, 1);
			border: 2rpx solid rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			text-align: center;
			line-height: 63rpx;
		}

		.user-name {
			font-size: 34rpx;
			line-height: 16rpx;
			color: rgba(7, 7, 7, 1);
		}
	}
	.btm {
		display: flex;
		flex-flow: column;
		padding: 10px 40rpx;
		// justify-content: center;
		justify-content: center;
		.tip {
			color: #dfbb50;
		}
		picker {
			font-size: 28rpx;
			color: #2c2c2c;
			text {
			}
		}

		button {
			margin: 0;
			margin-left: 40rpx;
			font-size: 28rpx;
			line-height: 60rpx;
			background: #dfbb50;
			&.button-hover {
				background: #b49540;
			}
		}
	}
}

.card-list {
	margin: 20rpx 0;
	padding: 0 30rpx;
	background: #fff;

	.card-item {
		padding: 24rpx 0;
		display: flex;

		& + .card-item {
			border-top: 1rpx solid #ececec;
		}

		text {
			font-size: 24rpx;
			line-height: 28rpx;
			color: rgba(39, 39, 39, 1);
		}

		.left {
			display: flex;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			text {
				margin-left: 20rpx;
				color: #999999;
			}

			image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 22rpx;
			}
		}
	}
}

.order-wrapper {
	margin: 0;

	.order-head {
		border-bottom: 1rpx solid #ececec;
	}

	.order-card {
		display: flex;
		justify-content: center;
		align-items: center;

		.order-item {
			margin: 40rpx 0;
			flex: 0 0 150rpx;
			height: 112rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #676767;
			}
		}
	}
}
</style>
